<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Cormac Susilo: Create an account</title>
        <link href="css/start/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    </h:head>
    <h:body>

        <h1>Thank you for choosing Cormac! </h1> 
        <p> Take a minute to fill out your details below.</p>
        <h:form>

            <p>
               <label>User name</label>
               <h:inputText id ="u" value="#{register.username}" valueChangeListener="#{register.valueChangeListener}" required ="true"
                            requiredMessage="Please enter username" class="text ui-widget-content ui-corner-all"/>
            <h:message for="u"/>
            </p>
            <p>
                First Name
            <h:inputText id ="f" value="#{register.firstname}" requiredMessage=" Please enter First Name" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
           
              <h:message for="f"/></p>
            
            <p>
                Last Name
            <h:inputText id ="l" value="#{register.lastname}" requiredMessage=" Please enter Last Name" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
             <h:message for="l"/>
            </p>
            <p>
                Email
            <h:inputText id ="e" value="#{register.email}" requiredMessage=" Please enter Email" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
              <h:message for="e"/>
            </p>
            <p>
                Confirm Email
            <h:inputText id ="e2" value="#{register.email}" requiredMessage=" Please confirm email" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
              <h:message for="e2"/>
            </p>
            <p>
               Choose your password
             <h:inputSecret id ="pass2" value="#{register.password}" requiredMessage=" Please enter password" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
          <h:message for="pass2"/>
            </p>
            <p>
                Confirm Password
            <h:inputSecret id ="pass" value="#{register.password}"  requiredMessage=" Please confirm password" valueChangeListener="#{register.valueChangeListener}" required ="true" class="text ui-widget-content ui-corner-all"/>
            <h:message for="pass"/>
            </p>
            
            <h:commandButton value="Register" 
                             actionListener="#{register.actionListener}" 
                             action="#{register.action}"
                             class="button ui-widget-content ui-corner-all"/>
            <hr/>

        </h:form>
    </h:body>
</html>

